const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin'); // 动态的生成html，自动引用打包后的js
console.log('outer module.exports', process.env.NODE_ENV)
module.exports = {
    // mode: 'development', // 不写默认为生产环境 production
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // 会成为默认的静态文件根目录
        filename: 'main.js',
    },
    devServer: {
        port: 8080, // 服务器端口 默认不写就是8080
        open: true, // 是否自动打开页面
        compress: true, // 是否启动压缩
        static: path.resolve(__dirname, 'static'), // 额外的静态文件的根目录
    },
    module: {
        rules: [{
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"],
                        plugins: [
                            ["@babel/plugin-proposal-decorators", { legay: true }]
                            ["@babel/plugin-proposal-class-properties", { loose: true }]
                        ]
                    }
                }, ]
            },
            { test: /\.txt$/, use: 'raw-loader' },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //两者必须配合使用否则页面样式不生效
            // { test: /\.less$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }, // postcss-lo，ader负责给css属性添加前缀的
            {
                test: /\.(jpg|png|gif|bmp|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        esModule: false, // 是否解析为es6模块
                        name: `[hash:8].[ext]`, // 默认是hash值有很多位数，我们只取前8位.和后缀
                        limit: 9 * 1024, //文件太小,就不需要发送http请求了，
                        //只需要把文件变成base64字符串内嵌到html页面就可以了
                    }
                }, ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
        }),
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
        })
    ]
}